<template>
  <div class="container">
    <h1 class="wow bounceIn">welcome nuxtjs-template</h1>
    <p class="wow bounceIn">
      已装插件：
      <a
        href="https://github.com/animate-css/animate.css?files=1"
        class="code"
        target="_blank"
      >
        Animate.cs
      </a>
      <a href="https://github.com/axios/axios" class="code" target="_blank">
        Axios
      </a>
      <a href="https://element.eleme.cn/#/zh-CN" class="code" target="_blank">
        Element-UI
      </a>
      <a href="https://wowjs.uk/" class="code" target="_blank">wowjs</a>
    </p>
  </div>
</template>

<script>
import CommonMixin from '@/mixins/common'
export default {
  mixins: [CommonMixin]
}
</script>

<style lang="scss" scoped>
.container {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p {
    margin-top: 1rem;
    color: #666;

    .code {
      display: inline-flex;
      align-items: center;
      background-color: #1abc9c;
      color: #fff;
      border-radius: 1rem;
      padding: 0.1rem 1rem 0.2rem 1rem;
      text-decoration: none;
    }

    .code + .code {
      margin-left: 0.5rem;
    }
  }
}
</style>
